<!DOCTYPE html>
<html>
  <head>
    <title>Rest Tool</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/my.css">
	<script src="js/jquery.min-2.0.0.js"></script>
	<script src="js/bootstrap.min.js"></script>
  </head>
  <body>
  	<div class="container-fluid">
  		<div class="row" style="margin-top: 10px;">
		  <div class="col-xs-8">
		  	<input type="text" class="form-control" placeholder="url" id="urllink">
        <ul id="history">
        </ul>
		  </div>
		  <div class="col-xs-2">
        <div class="btn-group">
          <button type="button" class="btn btn-info" id="method">GET</button>
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#getmethod">GET</a></li>
            <li><a href="#postmethod">POST</a></li>
          </ul>
        </div>
		  </div>
		  <div class="col-xs-2">
		  	<button type="submit" class="btn btn-success" style="width: 100%;" id="requestdata">Send</button>
		  </div>
		</div>
		<div class="row" style="margin-top: 15px;">
      <div class="btn-group" role="group" aria-label="..." style="margin-left: 15px;">
        <button type="button" class="btn grouphead btn-info" id="headerbtn">header</button>
        <button type="button" class="btn grouphead btn-default" id="bodybtn">body</button>
      </div>
    </div>
    <div class="methoddiv" style="margin-top: 10px;" id="postdispaly">
        <div class="row" style="margin-top: 5px;">
			<div class="col-xs-12 " >
				<textarea class="form-control" rows="8" id="bodydata"></textarea>
			</div>
		</div>
	</div>

    <div class="methoddiv" id="getdispaly" style="margin-top: 10px;">
      <div class="row" style="margin-top: 5px;" id="firstput">
        <div class="col-xs-12" >
            <div class="col-xs-3" style="padding-left: 0;">
              <input type="text" class="form-control" id="keyhead" placeholder="key">
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control" id="valuehead" placeholder="value">
            </div>
            <div class="col-xs-2">
              <button type="button" class="btn btn-default" id="plushead">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              </button>
            </div>
        </div>
      </div>
    </div>
	 <div class="row" style="margin-top: 10px;">
		<div class="col-xs-12" id="resultdata">
	      <pre style="margin-top: 10px;background-color: white;">
	        <code id="codedata"></code>
	      </pre>
		</div>
	  </div>
	</div>
  <script type="text/javascript">

  function supports_html5_storage() {
    try {
      return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
      return false;
    }
  }
  $(function(){

    $("a[href=#getmethod]").click(function(){
      $("#method").html('GET');
      
    });

    $("#headerbtn").click(function(){
     
      $('.methoddiv').css('display','none');
      $("#getdispaly").css('display','block');
      $('.grouphead').removeClass('btn-info').addClass('btn-default');
      $(this).addClass('btn-info');
    });
    $("#bodybtn").click(function(){
      $('.methoddiv').css('display','none');
      $("#postdispaly").css('display','block');
      $('.grouphead').removeClass('btn-info').addClass('btn-default');
      $(this).addClass('btn-info');
    });

    $("a[href=#postmethod]").click(function(){
      $("#method").html('POST');
    });
    $("#getdispaly").on('click','.minusbtn',function(){
    	$(this).parent().parent().parent().remove();
    })
    $("#plushead").click(function(){
      var q='<div class="row" style="margin-top: 5px;"><div class="col-xs-12"><div class="col-xs-3" style="padding-left: 0;"><input type="text" class="form-control" placeholder="key"></div><div class="col-xs-3"><input type="text" class="form-control" placeholder="value"></div><div class="col-xs-2"> <button type="button" class="btn btn-default minusbtn"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button></div></div>';
      $("#firstput").before(q);

    })
    $("#urllink").click(function(event){
       //$("#history").append('');
      $("#history").show();
      var storage = window.localStorage;
      
      var hisurls=storage['historyurls'];
      if(hisurls){
        var list = hisurls.split(';')
        var q="";
        for(var i in list){
          q+='<li>'+list[i]+'</li>';
        }
        $("#history").html(q);
      }
    event.stopPropagation();
    })
    $("#history").on('click','li',function(){
      
      $("#urllink").val($(this).html());
      $("#history").hide();
    })
    $(document).click(function(){

       $("#history").hide();

    })
  	$("#requestdata").click(function(){
  		var url = $("#urllink").val();
  		var method = $("#method").html();
  		var bodydata = $("#bodydata").val();
  		if(url.length>0){
  			if(url.substr(0,7)!='http://'){
  				url='http://'+url;
  			}
  		}else{
  			return false;
  		}
      var storage = window.localStorage;
      
      var hisurls=storage['historyurls']
      if(hisurls){
         var list = hisurls.split(';')
         var isture=$.inArray(url,list);
         if(isture!==-1){
         }else{
           storage['historyurls'] = hisurls+';'+url;
         }
       
      }else{
        storage['historyurls'] = url;
      }
  		var urlPattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
  		if(!url.match(urlPattern)){
  			return false;
  		}
  		if(method==='GET'){
  			$.get(url,function(res){
  			 if (typeof res ==='string') {
	          $("#codedata").html('<iframe>\n'+res+'</iframe>');
	         }
  				var sjson = JSON.stringify(res, null, "\t");
  				$("#codedata").html('\n'+sjson);
  			})
  		}else{
  			$.post(url,bodydata,function(res){
  				if (typeof res ==='string') {
  					$("#codedata").html('<iframe>\n'+res+'</iframe>');
		         }
  				var sjson = JSON.stringify(res, null, "\t");
  				$("#codedata").html('\n'+sjson);
  			})
  		}
  		
  	})
  })

  </script>

</body>
</html>